<template>
  <div class="content">
    <div class="jylybDiv">
      <TitleVue :name="'降雨量预报'" />
      <div class="chart-box" id="rainfallChart"></div>
    </div>
    <div class="syqBbDiv">
      <TitleVue :name="'水雨情滚动播报'" />
      <div class="scroll-content">
        <div class="itemDiv" v-for="(item, index) in bbList" :key="index">
          <p class="firstP">
            本次预报时间：<span class="tsSpan">{{ date }}  {{ time }}</span>
          </p>
          <div class="yqybDiv" @click="openRight">
            <!-- <img src="" alt=""> -->
            <div class="rightDiv">
              <p>雨情预报</p>
              <p>
                过去24小时的降雨量为<span class="tsSpan">{{ item.yqyb.gq24hjyl }}</span
                >mm。
              </p>
              <p>
                未来预计24小时的降雨量为<span class="tsSpan">{{ item.yqyb.wl24hjyl }}</span
                >mm。
              </p>
            </div>
          </div>
          <div class="line"></div>
          <div class="yqybDiv" @click="openRight">
            <!-- <img src="" alt=""> -->
            <div class="rightDiv">
              <p>水情预报</p>
              <p>
                24小时内，最高库水位预计将达<span class="tsSpan">{{ item.sqyb.sw }}</span
                >m，超过汛限水位。
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'
import * as echarts from 'echarts'

export default {
  name: 'YyLeft',
  components: {
    TitleVue
  },
  data() {
    return {
      time: null,
      date: null,
      timeAxis: ['11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
      rainList: [3, 2, 0, 1, 0, 1, 1, 0],
      bbList: [
        {
          time: '2025-04-02 11:00:00',
          yqyb: {
            gq24hjyl: 0,
            wl24hjyl: 8
          },
          sqyb: {
            sw: 1107.52
          }
        }
        //   {
        //   time: '2025-04-02 14:00:00',
        //   yqyb: {
        //     gq24hjyl: 0,
        //     wl24hjyl: 0
        //   },
        //   sqyb: {
        //     sw: 1106.47
        //   }
        // }
      ]
    }
  },
  mounted() {
    this.getCurrentTime()
    this.initEchart()
  },
  methods: {
    getCurrentTime() {
      let dateTime = new Date()
      this.time = `${dateTime.getHours() < 10 ? '0' + dateTime.getHours() : dateTime.getHours()}:${dateTime.getMinutes() < 10 ? '0' + dateTime.getMinutes() : dateTime.getMinutes()}:${
        dateTime.getSeconds() < 10 ? '0' + dateTime.getSeconds() : dateTime.getSeconds()
      }`
      this.date = `${dateTime.getFullYear()}-${dateTime.getMonth() + 1 < 10 ? '0' + (dateTime.getMonth() + 1) : dateTime.getMonth() + 1}-${
        dateTime.getDate() < 10 ? '0' + dateTime.getDate() : dateTime.getDate()
      }`
    },
    initEchart() {
      let chartDom = document.getElementById('rainfallChart')
      if (this.myChart) {
        this.myChart.dispose()
        chartDom.innerHTML = ''
      }
      this.myChart = echarts.init(chartDom, 'macarons')
      let option = {
        grid: {
          top: '10%',
          bottom: '12%',
          right: '4%',
          left: '10%'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: this.timeAxis,
          axisLabel: {
            color: '#fff'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: false,
            color: '#0095FF'
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#8FADCC'
          }
        },
        series: [
          {
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#0389D6' },
                { offset: 1, color: '#FFFFFF' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#0389D6' },
                  { offset: 1, color: '#FFFFFF' }
                ])
              }
            },
            data: this.rainList
          }
        ]
      }
      option && this.myChart.setOption(option)
    },
    openRight() {
      this.$store.commit('changeYjRight', true)
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .jylybDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;

    #rainfallChart {
      width: 100%;
      height: 32vh;
      padding: 0 1.2vw 1vh;
      box-sizing: border-box;
    }
  }
  .syqBbDiv {
    flex: 1;
    width: 100%;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    .scroll-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 0 1vh;
      box-sizing: border-box;
      // animation: scroll 10s linear infinite;
    }
    @keyframes scroll {
      0% {
        transform: translateY(100%);
      }
      100% {
        transform: translateY(-100%);
      }
    }
    .itemDiv {
      .tsSpan {
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 2.2vh;
        color: #fff;
      }
      .firstP {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 1.9vh;
        color: #ffffff;
      }
      .yqybDiv {
        display: flex;
        cursor: pointer;
        .rightDiv {
          flex: 1;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 1.9vh;
          color: #ffffff;
          p:nth-child(1) {
            color: #2eb1d7;
            margin-bottom: 5px;
            font-size: 2.2vh;
          }
        }
      }
      .line {
        width: 100%;
        height: 1px;
        margin: 10px;
        background-image: linear-gradient(90deg, rgba(20, 114, 255, 0), #1472ff 52%, rgba(20, 114, 255, 0));
      }
    }
  }
}
</style>
